<template>
	<page-container title="支付">
		<view class="payment-container">
			<!-- 积分显示区域 -->
			<view class="points-section">
				<text class="points-label">账户剩余积分：</text>
				<text class="points-value">{{userInfo.integral}}</text>
			</view>

			<!-- 输入框区域 -->
			<view class="input-section">
				<input type="number" class="amount-input" placeholder="请输入商品实际金额" v-model="amount" disabled />
				<view class="payment-info">
					<text class="info-text">
						*实际支付金额：
						<text class="red">{{actualAmount}}元</text> + 积分：<text class="green">{{pointsAmount}}</text>
					</text>
				</view>
			</view>

			<!-- 数字键盘 -->
			<view class="keyboard">
				<view class="keyboard-row" v-for="row in keyboardRows" :key="row[0]">
					<view class="key-item" v-for="key in row" :key="key" @tap="handleKeyPress(key)"
						:class="{'confirm-key': key === '确认'}">
						<text>{{ key }}</text>
					</view>
				</view>
			
				<view class="confirmbtn" @click="submitPayment"> <text>确认</text> </view>
			</view>
		</view>
	</page-container>
</template>

<script lang="ts" src="./index.ts">
	
</script>

<style lang="scss" scoped>
	.payment-container {
		// min-height: 100vh;
		background: f3f3f3;

		.search-div {
			height: 120rpx;
			background-color: #f3f3f3;
			position: relative;
		}
		
		
		.points-section {
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.points-label {
				font-size: 30rpx;
		
				color: #646464
			}
		
			.points-value {
				display: block;
				font-size: 30rpx;
				color: #fff;
				font-weight: bold;
				width: 200rpx;
				height: 66rpx;
				background: #43d534;
				border-radius: 6px;
				text-align: center;
				line-height: 66rpx;
			}
		}
		
		.input-section {
			padding: 0 20rpx;
			margin-top: 20rpx;
		
			.amount-input {
				height: 92rpx;
				line-height: 92rpx;
				border: 2rpx solid #43d534;
				border-radius: 12rpx;
				padding: 0 30rpx;
				font-size: 32rpx;
				color: #43d534;
				caret-color: #43d534;
				pointer-events: none;
		
				&::placeholder {
					color: #b5b5b5;
					opacity: 1;
				}
			}
		
			.payment-info {
				margin-top: 40rpx;
				color: #b5b5b5;
				font-size: 26rpx;
		
				.red {
					color: red;
				}
		
				.green {
					color: #43d534;
				}
			}
		}
		
		.keyboard {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #f5f5f5;
		
			.confirmbtn {
				position: absolute;
				bottom: 0;
				right: 0;
				height: 50%;
				width: 25%;
				display: flex;
				align-items: center;
				justify-items: center;
				color: #fff;
				background: #07c160;
				text-align: center;
				font-size: 34rpx;
		
				text {
					flex: 1;
				}
			}
		
			.keyboard-row {
				display: flex;
		
				position: relative;
		
				.key-item {
					flex: 1;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;
					border: 1rpx solid #eee;
					font-size: 34rpx;
		
					&.confirm-key {
						background: #07c160;
						color: #fff;
					}
				}
			}
		}
			
	}
</style>